import React from 'react';
import { Link } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { FiUsers, FiActivity, FiUserCheck, FiBarChart2 } from 'react-icons/fi';

const Home = () => {
  const { isAuthenticated, user } = useAuth();

  const features = [
    {
      icon: <FiUsers className="w-8 h-8 text-blue-500" />,
      title: '灵活分组',
      description: '支持手动拖拽和随机分组，满足不同活动需求'
    },
    {
      icon: <FiActivity className="w-8 h-8 text-green-500" />,
      title: '活动管理',
      description: '轻松创建和管理各类活动，跟踪活动进展'
    },
    {
      icon: <FiUserCheck className="w-8 h-8 text-purple-500" />,
      title: '实时状态',
      description: '实时显示用户在线状态，方便协调沟通'
    },
    {
      icon: <FiBarChart2 className="w-8 h-8 text-yellow-500" />,
      title: '数据统计',
      description: '可视化数据展示，帮助分析活动效果'
    }
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 英雄区域 */}
      <div className="bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
          <div className="text-center">
            <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight">
              <span className="block">活动组织系统</span>
            </h1>
            <p className="mt-6 max-w-lg mx-auto text-xl md:text-2xl">
              简化活动组织流程，提升团队协作效率
            </p>
            <div className="mt-10 flex justify-center gap-4">
              {!isAuthenticated ? (
                <>
                  <Link
                    to="/auth/register"
                    className="px-8 py-4 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10"
                  >
                    立即注册
                  </Link>
                  <Link
                    to="/auth/login"
                    className="px-8 py-4 border border-transparent text-base font-medium rounded-md text-white bg-blue-500 bg-opacity-60 hover:bg-opacity-50 md:py-4 md:text-lg md:px-10"
                  >
                    登录
                  </Link>
                </>
              ) : (
                <Link
                  to={user.role === 'admin' ? '/dashboard' : '/user/profile'}
                  className="px-8 py-4 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10"
                >
                  进入系统
                </Link>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* 功能特性 */}
      <div className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h2 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
              核心功能
            </h2>
            <p className="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
              专为活动组织设计的强大功能
            </p>
          </div>

          <div className="mt-16">
            <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
              {features.map((feature, index) => (
                <div key={index} className="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                  <div className="flex justify-center">
                    {feature.icon}
                  </div>
                  <h3 className="mt-6 text-lg font-medium text-gray-900 text-center">
                    {feature.title}
                  </h3>
                  <p className="mt-2 text-base text-gray-500 text-center">
                    {feature.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* 使用场景 */}
      <div className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="lg:text-center">
            <h2 className="text-base text-blue-600 font-semibold tracking-wide uppercase">
              使用场景
            </h2>
            <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
              适用于各类活动组织
            </p>
            <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
              无论是企业培训、团队建设还是学校活动，都能轻松应对
            </p>
          </div>

          <div className="mt-16">
            <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
              <div className="bg-white p-6 rounded-lg shadow">
                <h3 className="text-lg font-medium text-gray-900">企业培训</h3>
                <p className="mt-2 text-gray-500">
                  快速将员工分组进行培训活动，跟踪培训进度和效果。
                </p>
              </div>
              <div className="bg-white p-6 rounded-lg shadow">
                <h3 className="text-lg font-medium text-gray-900">团队建设</h3>
                <p className="mt-2 text-gray-500">
                  随机分组促进团队成员间的交流与合作，增强团队凝聚力。
                </p>
              </div>
              <div className="bg-white p-6 rounded-lg shadow">
                <h3 className="text-lg font-medium text-gray-900">学校活动</h3>
                <p className="mt-2 text-gray-500">
                  简化学生分组流程，提高活动组织效率，确保公平性。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;